<template>
  <button :class="[`max-button` , `max-button--${type}`,{'is-block': block}]"
          :style="defaultTheme" @click="click">
    <span v-if="$slots.default">
      <slot></slot>
    </span>
  </button>
</template>
<script>
import {defineComponent, ref, reactive} from "vue";

export default defineComponent({
  name: 'max-button',
  setup(props, context) {
    /**
     * 变量列表：
     * defaultTheme：默认主题配置
     */
    const defaultTheme = reactive({
      '--firstColor': '#409eff',
      '--secondColor': '#66B1FF',
      '--thirdColor': '#a0cfff',
      '--fontColor': '#fff',
      '--backGroundColor': 'transparent'
    })
    const success = reactive({
      '--firstColor': '#67c23a',
      '--secondColor': '#85CE61',
      '--thirdColor': '#9ece9f',
      '--fontColor': '#fff',
      '--backGroundColor': 'transparent'
    });
    const info = reactive({
      '--firstColor': '#909399',
      '--secondColor': '#A6A9AD',
      '--thirdColor': '#d8dbdf',
      '--fontColor': '#fff',
      '--backGroundColor': 'transparent'
    });
    const warning = reactive({
      '--firstColor': '#e6a23c',
      '--secondColor': '#EBB563',
      '--thirdColor': '#ebd9c7',
      '--fontColor': '#fff',
      '--backGroundColor': 'transparent'
    });
    const danger = reactive({
      '--firstColor': '#f56c6c',
      '--secondColor': '#F78989',
      '--thirdColor': '#f7d2d2',
      '--fontColor': '#fff',
      '--backGroundColor': 'transparent'
    });
    /**
     * 方法列表：
     * init：初始化
     * click：点击事件
     */
    const init = () => {
      switch(props.color){
        case 'success':
          Object.assign(defaultTheme, success);
          break;
        case 'info':
          Object.assign(defaultTheme, info);
          break;
        case 'warning':
          Object.assign(defaultTheme, warning);
          break;
        case 'danger':
          Object.assign(defaultTheme, danger);
          break;
      }
      Object.assign(defaultTheme, props.theme);
    }
    const click = (e) => {
      if (props.type === 'default') {
        context.emit('onClick', e);
      }
    }
    init();
    return {
      defaultTheme,
      click
    }
  },
  props: {
    type: {
      type: String,
      default: 'default'
    },
    block: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: 'default'
    },
    theme: {
      type: Object,
      default: {}
    }
  },
});
</script>
<style scoped>
.max-button {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  text-align: center;
  font-size: 14px;
  outline: none;
  margin: 0;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 4px 15px;
  border-radius: 2px;
  overflow: hidden;
  color: var(--fontColor);
  border: 1px solid var(--backGroundColor);
}

.max-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle, #ccc 10%, transparent 10.1%);
  transform: scale(20);
  opacity: 0;
  transition: all 1s;
}

.max-button:active::after {
  transform: scale(0);
  opacity: .5;
  transition: 0s;
}

.max-button--default {
  background: var(--firstColor);
}

.max-button--default:hover,
.max-button--default:focus {
  background: var(--secondColor);
}

.max-button--loading,
.max-button--loading:active,
.max-button--loading:focus,
.max-button--loading:hover {
  cursor: not-allowed;
  background: repeating-linear-gradient(310deg, var(--thirdColor), var(--thirdColor) 1px, var(--firstColor) 1px, var(--secondColor) 6px);
  animation: smooth 10s linear infinite;
  animation-play-state: running;
}

@keyframes smooth {
  to {
    background-position: 800px center;
  }
}

.max-button--disabled,
.max-button--disabled:active,
.max-button--disabled:focus,
.max-button--disabled:hover {
  cursor: not-allowed;
  background-image: none;
  background-color: var(--thirdColor);
}

.max-button.max-button--disabled::before,
.max-button.max-button--loading::before {
  display: none !important;
}

.max-button.max-button--disabled:hover::before,
.max-button.max-button--loading::before {
  display: none !important;
}

.max-button.max-button--disabled::after,
.max-button.max-button--loading::before {
  display: none !important;
}

.max-button.max-button--disabled:active::after,
.max-button.max-button--loading::before {
  display: none !important;
}

.is-block {
  width: 100%;
}
</style>

